<template>
        <view :class="'toptips'+type">
                <view class="container">
                    <image src="/static/images/toptips_icon_01.png" class="icon_01" />
                    <image src="/static/images/toptips_icon_02.png" class="close" @tap="close" />
                    {{msg}}
                </view>
        </view>
</template>
<script>

export default {
        props:{
                type:{
                    type:String,
                    default:'success'
                },
                msg:{
                    type:String,
                    default:"提示"
                }
        },
        methods:{
            close(){
                this.$emit('setClose','close');
            }
        }
}
</script>
<style lang="scss">
    .toptips{
        position: fixed;
        top:0;
        right:0;
        left:0;
        height: 60rpx;
        line-height: 60rpx;
        z-index: 900;
        .container{
            width: 100%;
            height: 60rpx;
            position: relative;
            z-index: 1;
            padding: 0 50rpx 0 85rpx;
            box-sizing: border-box;
        }
        .icon_01{
            width: 35rpx;
            height: 35rpx;
            position:absolute;
            top:50%;
            left:30rpx;
            transform: translateY(-50%);
        }
        .close{
            width: 16rpx;
            height: 16rpx;
            position:absolute;
            top:50%;
            right:20rpx;
            transform: translateY(-50%);
        }
    }

    .error{
        background: #FDE8E8;
        color:#FF3333;
        font-size:26rpx;
    }
</style>